<template>
  <div>
    <Head :head="head" @greet="greet"></Head>
    <el-dialog
      :visible.sync="centerDialogVisible"
      width="1000px"
      center>
      <div class="left_essential base">
        <img src="/static/assets/img/dtx1.png" alt="">
        <p v-for="(c,index) in cs" @click="sorts($event, index, c.t)" v-bind:class="{'visible1':nowIndex == index}" :key="c.index">{{ c.name }}</p>
      </div>
      <div class="right_essential" v-if="temp1 == 1">
        <p>尊敬的{{user}}用户，胸痛质控大家庭感谢您的加入</p>
        <div><p><span>组织</span></p><p><span>个人资料</span></p></div>
        <div><p><span>头像</span><img src="/static/assets/img/logo.png" alt=""></p><p><span>姓名</span>{{user}}</p><p><span>头像</span><img src="/static/assets/img/dtx.png" alt=""></p></div>
        <div><p><span>权限</span>{{user}}</p><p><span>权限</span>{{user}}</p></div>
        <div><p><span>简称</span>{{user}}</p><p><span>职务</span>{{user}}</p><p><span>科室</span>{{user}}></p></div>
        <div><p></p><p><span>手机</span>{{user}}<span class="tip">已绑定</span></p><p><span>邮箱</span>{{user}}<span class="tip">已验证</span></p></div>
      </div>
      <div class="right_essential" v-if="temp1 == 2">
        <p>您的安全服务</p>
        <div><p><span class="width_user">用户名</span>{{user}}</p></div>
        <div><p><span>绑定邮箱</span></p><span class="tip2">修改邮箱</span></div>
        <div><p><span>绑定手机</span>{{user}}</p></div>
        <div><p><span>登录密码</span>{{user}}</p><span class="tip2">修改邮箱</span></div>
      </div>
      <div class="both"></div>
    </el-dialog>
    <el-container class="right_bgcolor">
      <div class="bgcolor" style="width: 100%;">
        <el-main>
          <el-row>
            <el-col :span="12">
              <div class="pr">{{ show_name }}</div>
              <div class="mr">
                <img src="/static/assets/img/js.png" v-if="temps">
                <img src="/static/assets/img/dd.png" v-if="!temps" @click="send(scope)">
              </div>
              <el-dialog
                class="foot-center"
                :visible.sync="showDialog"
                width="360px">
                <div class="text-center">
                  <img src="/static/assets/img/supervision/fs.png" width="206" height="101" alt="">
                  <div class="mt-15 text-16">
                    {{dialogText}}
                  </div>
                </div>
                <span slot="footer">
        <el-button @click="showDialog = false" type="info" round>取 消</el-button>
        <el-button type="primary" @click="confirmSend" round>确 认</el-button>
      </span>
              </el-dialog>
              <el-dialog
                class="foot-center"
                :visible.sync="afterSend"
                width="360px">
                <div class="text-center">
                  <img src="/static/assets/img/supervision/sb.png" class="my-20" width="48" height="38" alt="">
                  <div class="mt-15 text-16">
                    {{dialogSend}}
                  </div>
                </div>
              </el-dialog>
            </el-col>
            <el-col :span="12">
              <div class="" style="height: 50px;margin-right: 1%;margin-top: -10px">
                <!--<img v-for="img in images" :src="tempa?img.src:img.src1" alt="" v-on:click="qh(img.t)" class="fr" :key="img.index">-->
                <el-form ref="form" :model="form" class="fr version">
                  <p class="fr" style="margin-top: 10px"><span style="margin-right:5px">仅通过认证</span><el-checkbox v-model="checked"></el-checkbox></p>
                  <el-select class="aaaa" v-model="form.region" placeholder="标准版">
                    <el-option label="标准版" value="1"></el-option>
                    <hr>
                    <el-option label="基层版-PCI" value="2"></el-option>
                    <hr>
                    <el-option label="基层版-溶柱" value="3"></el-option>
                    <hr>
                    <el-option label="基层版-转运" value="4"></el-option>
                  </el-select>
                  <div class="position-relative width-23 top_qi">
                    <div @click="showAverage = !showAverage" class="clearfix full-width">
                      <div class="fr text-white">
                        <i class="el-icon-arrow-down el-icon--right rotate" :class="{'rotate-180':showAverage}"></i>
                      </div>
                      <div class="fr" :class="{'text-white': choosedAverage.type}">{{choosedText}}</div>
                    </div>
                    <div class="sub-tip" :class="{'sub-tip-show':showAverage}"></div>
                    <transition name="el-zoom-in-top">
                      <div class="bg-white of-hidden sub-card" v-show="showAverage">
                        <div class="border-bottom" v-for="(item,i) in averages" :key="i">
                          <div class="px-10 text-14 text-black-light py-7">
                            <div class="d-flex"
                                 :class="{'pt-7': j !== 0}"
                                 v-for="(subItem,j) in item.content" :key="j">
                              <div class="width-8" :class="{'line-height-40':subItem.type === 'year' || subItem.type === 'freeAverage'}">
                                {{subItem.title}}
                              </div>
                              <div class="flex-full flex-wrap d-flex"
                                   :class="{'border-bottom pb-7': j !== item.content.length - 1}">
                                <div v-for="(sub,k) in subItem.subs" :key="k"
                                     class="mr-5 cursor-pointer position-relative" :class="{'choosedColor': check(sub,subItem,item)}">
                                  <div v-if="subItem.type === 'year'">
                                    {{sub.name}}
                                    <el-date-picker
                                      class="height-2"
                                      v-model="sub.value"
                                      type="year"
                                      :clearable="false"
                                      value-format="yyyy"
                                      @change="choose(sub,subItem,item)"
                                      prefix-icon="el-icon-arrow-down">
                                    </el-date-picker>
                                  </div>
                                  <div v-else-if="subItem.type === 'freeAverage'">
                                    <span class="mr-5">{{sub.label}}</span>
                                    <span :class="{'choosedColor': choosedAverage.type === 3}">{{sub.name}}</span>
                                    <el-date-picker
                                      class="width-4 height-2"
                                      v-model="sub.value"
                                      type="month"
                                      :clearable="false"
                                      value-format="yyyy年MM月"
                                      @change="choose(sub,subItem,item)"
                                      prefix-icon="el-icon-arrow-down">
                                    </el-date-picker>
                                  </div>
                                  <div v-else @click.stop="choose(sub,subItem,item)">
                                    {{sub.name}}
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </transition>
                  </div>
                </el-form>
              </div>
              <div style="border: 1px solid #cccccc;">
                <el-row>
                  <el-col :span="8" style="border-right: 1px solid #cccccc;text-align: center;">
                    <div style="height: 70px;border-bottom: 1px solid #cccccc;padding: 15px;">
                      <button type="button" style="font-size: 25px !important;" class="ebtn v-li" @click="show_hos($event, '', '江苏省')">江苏省</button>
                    </div>
                    <div style="height: 720px;">
                      <ul>
                        <li class="v-li" v-for="c in city" :key="c.index" @click="show_hos($event, c.value, c.name)">{{ c.name }}</li>
                      </ul>
                    </div>
                  </el-col>
                  <el-col :span="16" style="padding-left: 20px;">
                      <div style="height: 70px;padding: 15px;">
                        <input type="text" name="" placeholder="请输入医院" class="input_h"/><button type="button" class="s_button">搜索</button>
                      </div>
                      <div style="height: 720px;padding-left:20px;overflow-y:scroll;">
                      <ul v-for="h in hospital" :key="h.index" v-if="h.name == nowCity || nowCity == ''">
                        <li class="v-li" v-for="hh in h.hos" :key="hh.index" @click="hos_show($event, hh)">{{ hh }}</li>
                      </ul>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </el-main>
      </div>
    </el-container>
  </div>
</template>

<script>
import Head from '@/components/Head'
export default {
  data () {
    return {
      form: {
        region: '',
        date: '',
        value5: ''
      },
      form1: {
        quer: ''
      },
      dialogSend: '邮件发送成功',
      showDialog: false,
      afterSend: false,
      showAverage: false,
      checked: true,
      temp: true,
      temp1: 1,
      nowIndex: 0,
      centerDialogVisible: false,
      nowCity: '',
      show_name: '江苏省',
      temps: true,
      cs: [
        {name: '账户资料', t: 1},
        {name: '安全设置', t: 2}
      ],
      city: [
        {name: '南京', value: 'nanjing'}, {name: '无锡', value: 'wuxi'}, {name: '徐州', value: 'xuzhou'},
        {name: '常州', value: 'changzhou'}, {name: '苏州', value: 'suzhou'}, {name: '南通', value: 'nantong'},
        {name: '连云港', value: 'lianyungang'}, {name: '淮安', value: 'huaian'}, {name: '盐城', value: 'yancheng'},
        {name: '扬州', value: 'yangzhou'}, {name: '镇江', value: 'zhenjiang'}, {name: '宿迁', value: 'suqian'}
      ],
      hospital: [
        {
          name: 'nanjing',
          hos: ['南京市六合区人民医院', '南京鼓楼医院', '南京同仁医院', '江苏省南京市栖霞区医院', '溧水区人民医院',
            '南京市浦口医院', '南京江北人民医院', '南京医科大学第二附属医院', '南京江北人民医院', '南京市浦口医院',
            '南京医科大学第二附属医院', '江苏省中医院', '南京医科大学附属逸夫医院']
        },
        {
          name: 'wuxi',
          hos: ['无锡市惠山区人民医院', '江阴市中医院', '无锡市锡山人民医院', '中国人民解放军第101医院', '宜兴市第二人民医院',
            '江苏省无锡市惠山区中医医院', '无锡市第二人民医院', '无锡市第三人民医院', '宜兴市人民医院']
        },
        {
          name: 'xuzhou',
          hos: ['徐州市第一人民医院', '徐州市中医院']
        },
        {
          name: 'changzhou',
          hos: ['常州市第一人民医院', '常州市中医院']
        },
        {
          name: 'suzhou',
          hos: ['苏州大学附属第一医院', '苏州市相城区漕湖人民医院', '常熟市第一人民医院', '苏州广济医院', '苏州市吴中区甪直人民医院',
            '上海交通大学医学院附属苏州九龙医院', '苏州市木渎人民医院', '太仓市中医医院', '张家港澳洋医院', '张家港市第五人民医院',
            '江苏盛泽医院', '苏州市相城区第三人民医院', '苏州高新区人民医院', '常熟市支塘人民医院', '昆山市第六人民医院'
          ]
        },
        {
          name: 'nantong',
          hos: ['南通市第一人民医院', '南通市中医院', '南通市附属医院']
        },
        {
          name: 'lianyungang',
          hos: ['连云港第一人民医院', '连云港市医院']
        },
        {
          name: 'huaian',
          hos: ['淮安市人民医院', '淮安市中心医院']
        },
        {
          name: 'yancheng',
          hos: ['盐城市立医院', '盐城第一人民医院', '盐城第二人名医院']
        },
        {
          name: 'yangzhou',
          hos: ['扬州第一人名医院', '扬州附属医院']
        },
        {
          name: 'zhenjiang',
          hos: ['镇江市第一人民医院']
        },
        {
          name: 'suqian',
          hos: ['宿迁市第一人名医院', '宿迁市立医院']
        }
      ],
      user: '543759843@qq.com',
      head: {
        platform: '江苏省胸痛中心质控管理平台',
        analysis: '病因构成分析',
        name: '刘冰冰 ',
        methods: 'greet'
      },
      averages: [
        {
          type: 1,
          content: [
            {
              title: '年份',
              type: 'year',
              subs: [
                {
                  name: '请选择',
                  value: ''
                }
              ]
            },
            {
              title: '年平均',
              type: 'range',
              subs: [
                {
                  name: '整年',
                  value: 'all'
                }
              ]
            },
            {
              title: '半年平均',
              type: 'range',
              subs: [
                {
                  name: '上半年',
                  value: 'firstHalf'
                },
                {
                  name: '下半年',
                  value: 'secondHalf'
                }
              ]
            },
            {
              title: '季度平均',
              type: 'range',
              subs: [
                {
                  name: '一季度',
                  value: 'quarterOne'
                },
                {
                  name: '二季度',
                  value: 'quarterTwo'
                },
                {
                  name: '三季度',
                  value: 'quarterThree'
                },
                {
                  name: '四季度',
                  value: 'quarterFour'
                }
              ]
            },
            {
              title: '月平均',
              type: 'range',
              subs: [
                {
                  name: '1月',
                  value: 'jan'
                },
                {
                  name: '2月',
                  value: 'feb'
                },
                {
                  name: '3月',
                  value: 'mar'
                },
                {
                  name: '4月',
                  value: 'apr'
                },
                {
                  name: '5月',
                  value: 'may'
                },
                {
                  name: '6月',
                  value: 'jun'
                },
                {
                  name: '7月',
                  value: 'jul'
                },
                {
                  name: '8月',
                  value: 'aug'
                },
                {
                  name: '9月',
                  value: 'sep'
                },
                {
                  name: '10月',
                  value: 'oct'
                },
                {
                  name: '11月',
                  value: 'nov'
                },
                {
                  name: '12月',
                  value: 'Dec'
                }
              ]
            }
          ],
          choosedValue: []
        },
        {
          type: 2,
          content: [
            {
              title: '累计平均',
              type: 'sum',
              subs: [
                {
                  name: '累计至今',
                  value: 'now'
                }
              ]
            }
          ],
          choosedValue: []
        },
        {
          type: 3,
          content: [
            {
              title: '自由平均',
              type: 'freeAverage',
              subs: [
                {
                  label: '起始',
                  name: '请选择',
                  value: ''
                },
                {
                  label: '至',
                  name: '请选择',
                  value: ''
                }
              ]
            }
          ],
          choosedValue: []
        }
      ],
      choosedAverage: {}
    }
  },
  components: {
    Head
  },
  mounted () {
    api.getAvg('S2FMC', '本省平均值', '2018-01', '2018-01')
      .then(res => {
        console.log(res)
      })
    api.getRank('S2FMC', '2018-01', '2018-01')
      .then(res => {
        console.log(res)
      })
  },
  methods: {
    send (data) {
      this.dialogText = '发送邮件到这家医院'
      this.showDialog = true
      console.log(data)
    },
    sends (data) {
      this.dialogText = '批量发送邮件到医院'
      this.showDialog = true
      console.log(data)
    },
    confirmSend () {
      this.showDialog = false
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      setTimeout(() => {
        loading.close()
        this.afterSend = true
      }, 1000)
    },
    toggles: function () {
      this.isShow = true
    },
    togs: function () {
      this.isow = true
    },
    greet: function () {
      this.centerDialogVisible = true
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },
    qh: function (t) {
      this.tempa = t
      this.temp = t
    },
    ranking: function (event, index, t) {
      this.nowIndex1 = index
      this.tempe = t
    },
    sorts(event, index, t) {
      this.nowIndex = index
      this.temp1 = t
    },
    choose(sub, fparent, sparent) {
      if (fparent.type === 'year' || fparent.type === 'freeAverage') {
        sub.name = sub.value
      }
      this.choosedAverage = sparent
      let index = _.findIndex(sparent.choosedValue, {type: fparent.type})
      if (index === -1) {
        let obj = {
          type: fparent.type,
          value: sub.value,
          name: sub.name
        }
        sparent.choosedValue.push(obj)
      } else {
        sparent.choosedValue[index].value = sub.value
        sparent.choosedValue[index].name = sub.name
      }
      // 清空未选择项
      this.averages.forEach(item => {
        if (item.type !== this.choosedAverage.type) {
          item.choosedValue = []
          item.content.forEach(subItem => {
            if (subItem.type === 'year' || subItem.type === 'freeAverage') {
              subItem.subs.forEach(sub => {
                sub.value = ''
              })
            }
          })
        }
      })
    },
    check(sub, fparent, sparent) {
      if (fparent.type !== 'freeAverage') {
        if (_.findIndex(sparent.choosedValue, {type: fparent.type}) > -1) {
          return sparent.choosedValue[_.findIndex(sparent.choosedValue, {type: fparent.type})].value === sub.value
        }
        return false
      }
    },
    removeItem: function (that) {
      $(that).parent().remove()
    },
    pass: function (str) {
      this.temp = str
    },
    show_hos: function (event, str, name) {
      let el = event.currentTarget
      $('.v-li').each(function(e){
        $(this).css('color', '#333333')
        if (e !== 0) {
          $(this).css('fontSize', '18px')
        }
        $(this).css('background', '#fff')
      })
      $(el).css('color', '#3475DE')
      $(el).css('background', '#f2f2f2')
      $(el).css('width', '150px')
      $(el).css('height', '40px')
      $(el).css('line-height', '40px')
      $(el).css('border-radius', '10px')
      $(el).css('border', '0')
      if (str !== '') {
        $(el).css('fontSize', '20px')
        $(el).css('margin', '15px auto')
      } else {
        $(el).css('fontSize', '25px')
        $(el).css('margin', 'auto')
      }
      this.nowCity = str
      this.show_name = name
      this.temps = true
    },
    hos_show: function (e, str) {
      let el = e.currentTarget
      $('.v-li').each(function(e){
        $(this).css('color', '#333333')
        if (e !== 0) {
          $(this).css('fontSize', '18px')
        }
      })
      $(el).css('color', '#3475DE')
      $(el).css('fontSize', '20px')
      this.temps = false
      this.show_name = str
    },
  },
    computed: {
      'choosedText' () {
        let result = ''
        if (!this.choosedAverage.type) {
          result = '请选择'
        } else {
          if (this.choosedAverage.choosedValue[0].type !== 'year') {
            _.reverse(this.choosedAverage.choosedValue)
          }
          if (this.choosedAverage.type === 3) {
            this.choosedAverage.content[0].subs.forEach(item => {
              result += item.label + ' ' + item.value + ' '
            })
          } else {
            this.choosedAverage.choosedValue.forEach(item => {
              result += item.name + '  '
            })
          }
        }
        return result
      }
    }
}
</script>

<style scoped>
  body > .el-container {
    margin-bottom: 40px;
  }
  .top_qi{
    line-height: 37px;
  }
  .right_bgcolor{
    padding: 20px 20px 20px 0;
    background-color: #f2f2f2;
  }
  .right_bottom div{
    margin-top: 50px;
    line-height: 25px;
  }
  /*标题*/
  .grad h1{
    float: left;
    line-height: 60px;
    color: #ffff;
    font-size: 25px;
  }
  /*右边图标*/
  .grad img{
    margin-left: 30px;
    margin-top: 38px;
  }
  /*版本 时间点击弹出事件*/
  .version{
    display: inline-flex;
    float: right
  }
  hr{color:#f2f2f2}
  .sub-card{
    position: absolute;
    z-index: 100;
    top: 80px;
    height: 392px;
    width: 480px;
    right: 0;
    line-height: 20px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    border-radius: 4px;
  }
  .sub-tip{
    position: absolute;
    bottom: 0px;
    left: 50%;
    margin-left: -5px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid transparent;
    border-bottom: 0px solid white;
    transition: border-bottom-width 120ms ease-out;
  }
  .btn{
    border:1px solid #fff;
    color:#fff;
    background-color: #1086FD;
    width: 70px;
    height: 30px;
    border-radius: 25px;
  }
  .rotate{
    transition: transform .3s;
  }
  .none_black{
    border-bottom: 1px solid #ddd;
    margin-right: 5px;
  }
  .bgcolor{
    background-color: #fff;
  }
  .detail{
    background: #CCCCCC;
    width: 70px;
    padding: 5px 10px;
    display: inline-block;
    text-align: center;
    border-radius: 20px;
    color: #ffffff;
    cursor: pointer;
  }
  .bettew_top{
    line-height: 40px;
  }
  .el-main{
    margin-left: 1%;
  }
  .pr{
    text-align: left;
    line-height: 26px;
    font-size: 24px;
    color: #0F86FC;
  }
  .mr{
    margin-left: 8%;
    margin-top: 6%;
  }
  .v-li{
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    color: #333333;
    cursor: pointer;
  }
  .ebtn{
    color: #3475DE;
    width: 150px;
    font-size: 24px;
    height: 40px;
    line-height: 40px;
    background: #f2f2f2;
    border-radius: 10px;
    border: 0;
  }
  .input_h{
    width: 300px;
    margin-right: 10px;
    padding-left: 15px;
    border: 1px solid #E6E6E6;
    background: #E6E6E6;
    line-height: 40px;
    border-radius: 10px;
  }
  .s_button{
    color: #0F86FC;
    width: 80px;
    line-height: 40px;
    font-size: 16px;
    border-radius: 30px;
    border: 0;
    background: #E6E6E6;
  }
  .choosedColor{
    color: #1186FC;
  }
</style>
